﻿<!DOCTYPE HTML>
<html>
<head>
    <script charset="utf-8" id="allmobilize" src="js/allmobilize.min.js"></script>
    <meta content="no-siteapp" http-equiv="Cache-Control"/>
    <link media="handheld" rel="alternate"/>
    <!-- end 云适配 -->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>登录-QQ音乐</title>
    <meta content="23635710066417756375" property="qc:admins"/>
    <meta content="QQ音乐是隶属于腾讯音乐娱乐集团的音乐流媒体平台。自2005年创立，QQ音乐注册用户总量已达8亿。" name="description">
    <meta content="QQ音乐以优质内容为核心，以大数据与互联网技术为推动力 [1]  ，致力于打造“智慧声态”的“立体”泛音乐生态圈 [3]  ，为用户提供多元化的音乐生活体验。"
          name="keywords">

    <meta content="QIQ6KC1oZ6" name="baidu-site-verification"/>

    <!-- <div class="web_root"  style="display:none">h</div> -->
    <script type="text/javascript">
        var ctx = "h";
        console.log(1);
    </script>
    <link href="h/images/favicon.ico" rel="Shortcut Icon">
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/xiugai.css"/>
    <script src="js/jquery.1.10.1.min.js" type="text/javascript"></script>

    <script src="js/jquery.lib.min.js" type="text/javascript"></script>
    <script src="js/core.min.js" type="text/javascript"></script>


    <script type="text/javascript">
        var youdao_conv_id = 271546;
    </script>
    <script src="js/conv.js" type="text/javascript"></script>
</head>

<body id="login_bg">
<div class="login_wrapper">
    <div class="login_header">
        <img alt="QQ音乐" src="images/logo_tubiao.jpeg" width="200" height="200"/>
        <div id="a"><img src="images/logo_lan.jpeg" width="120" height="120" alt="cloud"/></div>
       <!-- <div id="cloud_m"><img alt="cloud" height="95" src="images/cloud_m.png" width="136"/></div>-->
    </div>

    <input id="resubmitToken" type="hidden" value=""/>
    <div class="login_box">
        <form id="loginForm">
            <input id="email" name="email" placeholder="请输入登录的手机号" tabindex="1" type="text" value=""/>
            <input id="password" name="password" placeholder="请输入密码" tabindex="2" type="password"/>
            <span class="error" id="beError" style="display:none;"></span>
            <label class="fl" for="remember"><input checked="checked" id="remember" name="autoLogin" type="checkbox"
                                                    value=""/> 记住我</label>
            <a class="fr" href="reset.html" target="_blank">忘记密码？</a>

            <!--<input type="submit" id="submitLogin" value="登 &nbsp; &nbsp; 录" />-->
            <input type="submit" id="submitLogin" value="登&nbsp;&nbsp;录"/>
            <input type="button" id="faceLogin" value="人脸登录" style="width: 155px;height: 46px;background-color: #0D9572; color:white ;margin-left: 20px;margin-top: 15px"/>
        </form>
        <div class="login_right">
            <div>还没有QQ音乐帐号？</div>
            <a class="registor_now" href="register.html">立即注册</a>
            <div class="login_others"></div>
            <!--<a class="icon_wb" href="h/ologin/auth/sina.html" target="_blank" title="使用新浪微博帐号登录"></a>
            <a class="icon_qq" href="h/ologin/auth/qq.html" target="_blank" title="使用腾讯QQ帐号登录"></a>-->
        </div>
    </div>
    <div class="login_box_btm"></div>
</div>
<script type="text/javascript" src="js/jquery-md5.js"></script>
<script type="text/javascript">

    $("body").on('click','#faceLogin',function () {
        location.href = "./faceLogin.html"
    })

    $(function () {
		//添加自定义校验
		//手机号格式验证
		jQuery.validator.addMethod("isPhoneNumber",function (value,element) {
			//正则表达式
			var tel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			return tel.test(value);
		},"请正确填写您的手机号");

		//手机号是否存在验证
		jQuery.validator.addMethod("validatePhoneNumber",function (value,element) {
			//手机号不可用
			let flag = false;
			//发动http xhr 异步请求服务器查手机号
			$.ajax({
				async:false,//设置同步
				type:"get",
				url:"/user/Phone",
				data:{
                    userPhone:value
				},
				dataType:"json"
			}).done((result)=>{
				flag = result.data;//result.data=true表示手机在数据库中存在
			}).fail(()=>{
				alert("validatePhoneNumber request fail");
			});
			return flag;
		},"手机号不存在");
		//验证表单
		$("#loginForm").validate({
			rules: {
				email: {//手机号
					required: true,
					isPhoneNumber:true,    			//自定义验证规则名，检查手机号是否合法
					validatePhoneNumber: true		//自定义验证规则名，检查手机号是否被占用
				},
				password: {//密码
					required: true,
					rangelength: [6, 16]
				},
				checkbox: {required: true}
			},
			messages: {
				email: {
					required: "请输入登录手机号"
				},
				password: {
					required: "请输入密码",
					rangelength: "请输入6-16位密码，字母区分大小写"
				}
			},
			submitHandler: function (form) {
				//判断记住密码是否选中
				if($('#remember').prop("checked")){
					$('#remember').val(1);
				}else{
					$('#remember').val(null);
				}
				var phoneNumber = $('#email').val();
				var password = $('#password').val();
				var remember = $('#remember').val();

				$(form).find(":submit").attr("disabled", true);

				$.ajax({
					type: 'POST',
					data: {
                        userPhone: phoneNumber,
                        userPassword: $.md5(password),//使用jquery-md5.js
					},
					url:'/user/login',
					dataType: 'json'
				}).done(function (result) {
					if (result.data != null) {
						//登录成功
						alert("登录成功");
						//判断用户是否记住密码
						if (remember == 1){
							//使用localStorage存储对象存储用户登录信息
							localStorage.setItem("rememberMe",phoneNumber+"="+password);
						}else{
							//删除记住密码
							localStorage.removeItem("rememberMe");
						}
						//前往首页
						location.href="./index.html";
					} else {
						//登录失败
						alert("登录失败");
					}
					$(form).find(":submit").attr("disabled", false);
				});
			}
		});

		//1.localStorage获取指定的值
		let rememberMe = localStorage.getItem("rememberMe");
		//2.判断是否存在
		if (rememberMe != null){
			//获取值"手机号=密码"填充在指定的dom元素上
			//使用=进行切割
			let vs = rememberMe.split("=");
			//填充
			$("input[name='email']").val(vs[0]);
			$("input[name='password']").val(vs[1]);
			$("input[name='autoLogin']").prop("checked",true);
		}
		//1.对手机号输入框进行input监听
		$("input[name='email']").on("input",function () {
			//2.清除填充内容
			$("input[name='password']").val("");
			$("input[name='autoLogin']").prop("checked",false);
			//3.判断是否存在remmember
			let rememberMe = localStorage.getItem("rememberMe");
			if(rememberMe != null){
				//拿着输入的手机号和rememberMe的值做对比
				let inputPhoneNumber = $(this).val();
				let vs = rememberMe.split("=");
				if (inputPhoneNumber == vs[0]){
					//将密码填充,并且将记住密码勾中
					$("input[name='password']").val(vs[1]);
					$("input[name='autoLogin']").prop("checked",true);
				}
			}
		});
    })
</script>
</body>
</html>